import React, { FC, useEffect, useState} from "react"
import {Modal, Form, Input, Button, Upload, Radio  } from 'antd';


import { FILe_URL } from "@tools/config";

import {
    Player,
    ControlBar,
    PlayToggle, // PlayToggle 播放/暂停按钮 若需禁止加 disabled
    ReplayControl, // 后退按钮
    ForwardControl,  // 前进按钮
    CurrentTimeDisplay,
    TimeDivider,
    PlaybackRateMenuButton,  // 倍速播放选项
    VolumeMenuButton
  } from 'video-react';
  import "../../../../node_modules/video-react/dist/video-react.css"; // import css

const edit:FC<any> = props => {
    const {dataInfo, isVisible, onCancel} = props;
    const Players = (videoUrl:string) => {
        return (
            <Player
            poster={FILe_URL+dataInfo.coverPic}>
            <source
              src={FILe_URL+ videoUrl}
              type="video/mp4"
            />
            <ControlBar autoHide={false} disableDefaultControls={false}>
              <ReplayControl seconds={10} order={1.1} />
              <ForwardControl seconds={30} order={1.2} />
              <PlayToggle />
              <CurrentTimeDisplay order={4.1} />
              <TimeDivider order={4.2} />
              <PlaybackRateMenuButton rates={[5, 2, 1.5, 1, 0.5]} order={7.1} />
              <VolumeMenuButton />
            </ControlBar>
          </Player>
        )
    }
    return (
        <Modal width="80%" 
        title={dataInfo.name} 
        visible={isVisible} 
        onCancel={onCancel} footer={null}
        maskClosable={false}>
            {
                // {1: "音频", 2: "视频", 3: "文档"
                dataInfo.type=='1'||dataInfo.type=='2'?
                Players(dataInfo.pic)
                :
                <iframe
                    src={FILe_URL+dataInfo.pic} //文件地址
                    className="pdf-iframe"
                    title="pdf预览"
                    frameBorder="no"
                />
            }
        </Modal>
    )
}
export default edit
